
function fakexscroll(areaid){
 
    // 가로 스크롤바
 
    this.movebarminimumsize=10;
    this.resizemovebar=true;
    this.defaultmovevalue=15;
    this.contentid=areaid+'_content';
    this.barid=areaid+'_bar';
 
    var isie=(navigator.userAgent.toLowerCase().indexOf('msie')!=-1)? true : false;
    var isie7=(navigator.userAgent.toLowerCase().indexOf('msie 7')!=-1)? true : false;
    var isff=(navigator.userAgent.toLowerCase().indexOf('firefox')!=-1)? true : false;
    var mask,content,leftarrow,rightarrow,movebar=new Array(),downpos,barmoveable=false;
 
    this.initialize=function(){
        
        mask=document.getElementById(areaid);
        content=document.getElementById(this.contentid);
        bar=document.getElementById(this.barid);
 
        content.style.position='relative';
        content.style.left=0;
        
        var wcheck=getwidth();
        if(wcheck[0]>wcheck[1]){
            bar.style.display='none';
            return;
        }else{
            bar.style.cursor='pointer';
            var barchilds=bar.getElementsByTagName('div');
            leftarrow=barchilds[0];
            movebar[0]=barchilds[1];
            rightarrow=barchilds[2];
            if(this.resizemovebar){
                var temp=Math.ceil(wcheck[0]*(wcheck[0]/wcheck[1]));
                movebar[0].style.width=(temp<this.movebarminimumsize)? this.movebarminimumsize+'px' : temp+'px';
            }
            movebar[1]=movebar[0].offsetLeft;
            movebar[2]=wcheck[0]-(rightarrow.offsetWidth+movebar[0].offsetWidth);
            if(leftarrow.offsetWidth<movebar[1]) movebar[2]-=movebar[1]-leftarrow.offsetWidth;
            movebar[3]=movebar[2]-movebar[1];
            bar.onmousedown=function(e){
                if(isie) e=window.event;
                var target=(e.target)? e.target : e.srcElement;
                if(target!=leftarrow && target!=rightarrow && target!=movebar[0]){
                    var clickpos=(e.offsetX)? e.offsetX : e.layerX;
                    movebar[4]=movebar[0].offsetWidth;
                    if(movebar[0].offsetLeft>clickpos) eval(areaid+'.beforescroll(\'left\',true,true,'+clickpos+');');
                    else if((movebar[0].offsetLeft+movebar[4])<clickpos) eval(areaid+'.beforescroll(\'right\',true,true,'+clickpos+');');
                }
                return false;
            }
            leftarrow.onmousedown=function(){
                eval(areaid+'.beforescroll(\'left\',true);');
                return false;
            }
            rightarrow.onmousedown=function(){
                eval(areaid+'.beforescroll(\'right\',true);');
                return false;
            }
            bar.onmouseup=this.setclear;
            bar.onmouseout=this.setclear;
            leftarrow.onmouseup=this.setclear;
            leftarrow.onmouseout=this.setclear;
            rightarrow.onmouseup=this.setclear;
            rightarrow.onmouseout=this.setclear;
            movebar[0].onmousedown=function(){
                document.onmousedown=eval(areaid+'.dragdown');
                document.onmousemove=eval(areaid+'.dragmove');
                document.onmouseup=eval(areaid+'.dragup');
            }
            content.onmouseover=function(){
                if(isie) this.onmousewheel=eval(areaid+'.wheelaction');
                else this.addEventListener((isff)? 'DOMMouseScroll' : 'mousewheel',eval(areaid+'.wheelaction'),false);
            }
        }
    }
 
    var forie7=null;
    var getwidth=function(){
        if(isie7){ // for ie7 offsetWidth bug
            if(!forie7){
                mask.style.overflow='visible';
                forie7=content.offsetWidth;
                mask.style.overflow='hidden';
                content.style.height=forie7+'px';
            }
            return [mask.offsetWidth,forie7];
        }else return [mask.offsetWidth,content.offsetWidth];
    }
 
    this.wheelaction=function(e){
        if(isie) e=window.event;
        var value=(e.wheelDelta)? e.wheelDelta : e.detail;
        if(!isff) value=(value>0)? -value : value-(value*2);
        if(value>0) eval(areaid+'.scroll(\'right\');');
        else eval(areaid+'.scroll(\'left\');');
        if(barmoveable){
            if(e.preventDefault) e.preventDefault();
            return false;
        }
    }
 
    this.dragdown=function(e){
        if(isie) e=window.event;
        downpos=e.clientX;
        return false;
    }
 
    this.dragmove=function(e){
        if(isie) e=window.event;
        setscroll(movebar[0].offsetLeft-(downpos-e.clientX));
        downpos=e.clientX;
        return false;
    }
    
    this.dragup=function(){
        document.onmousedown=null;
        document.onmousemove=null;
        document.onmouseup=null;
        return false;
    }
 
    var setscroll=function(value){
        value=(value<movebar[1])? movebar[1] : (value>movebar[2])? movebar[2] : value;
        movebar[0].style.left=value+'px';
        var wcheck=getwidth();
        wcheck=wcheck[1]-wcheck[0];
        var nleft=-(Math.ceil(wcheck*((value-movebar[1])/movebar[3])));
        nleft=(nleft>0)? 0 : (nleft>wcheck)? wcheck : nleft;
        barmoveable=(nleft==0 || nleft==-wcheck)? false : true;
        content.style.left=nleft+'px';
    }
    
    var scrolltimer=null;
    this.defaultsetscroll=function(flag){
        if(flag=='left') setscroll(movebar[0].offsetLeft-this.defaultmovevalue);
        else if(flag=='right') setscroll(movebar[0].offsetLeft+this.defaultmovevalue);
    }
 
    this.beforescroll=function(flag,auto,isbar,clickpos){
        this.defaultsetscroll(flag);
        scrolltimer=setTimeout(areaid+".scroll('"+flag+"',true,"+isbar+","+clickpos+")",400);
    }
 
    this.scroll=function(flag,auto,isbar,clickpos){
        this.defaultsetscroll(flag);
        var setauto=function(){
            scrolltimer=setTimeout(areaid+".scroll('"+flag+"',true,"+isbar+","+clickpos+")",50);
        }
        if(auto){
            if(isbar){
                if((flag=='left') && (((clickpos-(movebar[4]/2))+this.defaultmovevalue)<movebar[0].offsetLeft)) setauto();
                else if((flag=='right') && ((clickpos-(movebar[4]/2))>(movebar[0].offsetLeft+this.defaultmovevalue))) setauto();
            }else setauto();
        }
    }
 
    this.setclear=function(){
        clearTimeout(scrolltimer);
        return false;
    }
 
}





$(function()
{
	// Copy the pages javascript sourcecode to the display block on the page for easy viewing...
	var sourcecodeDisplay = $('#sourcecode-display');
	if (sourcecodeDisplay.length) {
		sourcecodeDisplay.empty().append(
			$('<code />').append(
				$('<pre />').html(
					$('#sourcecode').html().replace(/\n\t\t\t/gm, '\n').replace('>', '&gt;').replace('<', '&lt;')
				)
			)
		);
		$('#css-display').empty().append(
			$('<code />').append(
				$('<pre />').html(
					$('#page-css').html().replace(/\n\t\t\t/gm, '\n')
				)
			)
		);
	}
});